<template>
  <NoTabBarPage
    :scroll-props="{ pulldownEnabled: false }"
    :navigate-bar-props="{ background: '#fff', title: '个人资料' }"
    custom-class="persional-detail"
  >
    <div class="persional-detail__content">
      <div class="persional-detail__content-panel">
        <CommonField label="头像" content-align="right">
          <template #content>
            <button
              open-type="chooseAvatar"
              class="avatar-btn"
              @chooseAvatar="chooseAvatar"
            >
              <image :src="avatar" class="avatar-btn__icon" />
            </button>
          </template>
        </CommonField>
        <CommonField label="昵称" content-align="right">
          <template #content>
            <input
              v-model="nickname"
              type="nickname"
              class="nickname-input"
              @change="onNicknameChange"
            />
          </template>
        </CommonField>
        <CommonField label="手机号" content-align="right">
          <template #content>
            <button
              open-type="getPhoneNumber"
              class="phone-btn"
              @getphonenumber="getPhoneNumber"
            >
              {{ phone }}
            </button>
          </template>
        </CommonField>
        <CommonField
          label="社区"
          content-align="right"
          content="上海市浦东新区孙桥社区卫生服务中心"
        />

        <CommonField
          v-for="item in targetOptions"
          :key="item.prop"
          :label="item.label"
        >
          <template #content>
            <nut-input
              v-model="baseInfo[item.prop]"
              :border="false"
              input-align="right"
              @blur="onFieldChange(item.prop)"
            >
              <template v-if="item.unit" #right>{{ item.unit }}</template>
            </nut-input>
          </template>
        </CommonField>
      </div>

      <div class="persional-detail__content-loginout" @tap="onLoginout">
        退出登录
      </div>
    </div>
  </NoTabBarPage>
</template>

<script setup lang="ts">
import NoTabBarPage from "@/components/common-page/noTabBar-page.vue";
import CommonField from "@/components/common-field/index.vue";

import "./index.less";
import { apiGetPhone, apiUpdateUser } from "@/apis/login";
import debounce from "lodash.debounce";
import { ref } from "vue";
import { useUserInfo } from "@/hooks/useUserInfo";
import { ResponseCodeEnum } from "@/constants/index";
import Taro from "@tarojs/taro";
import { useLogin } from "@/hooks/useLogin";
defineOptions({
  name: "persional-detail",
});

const targetOptions = [
  { label: "BMI", prop: "bmi", color: "#1AA1E6", unit: null },
  { label: "血压", prop: "bloodPressure", color: "#FFE030", unit: "mmHg" },
  {
    label: "空腹血糖",
    prop: "fastingBloodGlucose",
    color: "#0DC98B",
    unit: "mmol/L",
  },
  {
    label: "低密度脂蛋白",
    prop: "ldlCholesterol",
    color: "#FF5A5A",
    unit: "mmol/L",
  },
  { label: "血尿酸", prop: "uricAcid", color: "#FF9D21", unit: "μmol/L" },
];
const { loginout } = useLogin();
const {
  setNickname,
  setAvatar,
  setPhone,
  setHealthTarget,
  nickname: globalNickname,
  avatar,
  phone,
  healthTarget,
} = useUserInfo();
const nickname = ref(globalNickname);

const baseInfo = ref({
  bmi: healthTarget.value.bmi,
  bloodPressure: healthTarget.value.bloodPressure,
  fastingBloodGlucose: healthTarget.value.fastingBloodGlucose,
  ldlCholesterol: healthTarget.value.ldlCholesterol,
  uricAcid: healthTarget.value.uricAcid,
});

const chooseAvatar = (e: any) => {
  const { avatarUrl } = e.detail;

  Taro.uploadFile({
    url: "http://www.hicc.info:6002/api/cms/tools/upload",
    filePath: avatarUrl,
    name: "file",
    success: (res) => {
      const { data } = JSON.parse(res.data);
      apiUpdateUser({ avatar: data, nickname: null });

      setAvatar(data);
    },
  });
};

const nicknameChangeDebounceFunc = debounce((value) => {
  if (!value) return;

  apiUpdateUser({ avatar: null, nickname: value });
  setNickname(value);
}, 300);

const onNicknameChange = (event: any) => {
  nicknameChangeDebounceFunc(event.detail.value);
};

const getPhoneNumber = async (e: any) => {
  const { errMsg, code } = e.detail;
  if (errMsg === "getPhoneNumber:ok") {
    try {
      const phoneRes: any = await apiGetPhone(code);
      if (phoneRes.code === ResponseCodeEnum.SUCCESS) {
        setPhone(phoneRes.data);
      }
    } catch (error) {}
  }
};

const onFieldChange = (prop: string) => {
  const value = baseInfo.value[prop];
  if (prop === "bloodPressure") {
    const [sbp, dbp] = value.split("/");
    apiUpdateUser({ bloodPressureSbp: sbp, bloodPressureDbp: dbp });
  } else {
    apiUpdateUser({ [prop]: baseInfo.value[prop] });
  }
  setHealthTarget(prop, baseInfo.value[prop]);
};
const onLoginout = () => {
  loginout();
};
</script>

<style lang="less">
.persional-detail {
  .nut-input {
    padding: 0;
  }
}
</style>
